<template>
    <transition name="firstPage">
          <div class="fist-page">
            <div class="personShow">
                <img :src="pic_src"  class="pic" width="200">
                <p>纵然磨难不断 &nbsp; &nbsp;&nbsp; &nbsp;但还是要努力的</p>
            </div>
            <article class="article-wrapper" v-for='item in result'>
                <h1 class="title">{{item.title}}</h1>
                <div class="time-detail">
                    <span><i class="iconfont ">&#xe62c;</i>{{item.originDate}} </span>
                    <span><i class="iconfont ">&#xe628;</i>{{item.originDate}}</span>
                    <span class="classify">{{item.classify}}</span>
                </div>
                <p class="desc">{{item.abstract}}</p>
                <div class="label">
                    <div class="left">
                        <i class="iconfont">&#xe611;</i>
                        <span v-for='label in getLabel(item)'>{{label}}</span>

                    </div>
                    <div class="right">
                        <span >阅读({{item.reading}})</span>
                        <span>评论({{item.review}})</span>
                        <span @click='openDetail(item)' class="link">全文链接</span>
                    </div>
                </div>
            </article>
            <div class="diverPage">
                <span v-show="!(page === 1)" class="prePage" @click="prePage">上一页</span>
                <span class="nextPage" v-show=" (Math.ceil(totalNum/perPageNum) > page)" @click="nextPage">下一页</span>
            </div>
          </div>
  </transition>
</template>

<script>
// const PERNUM 3 
export default {
  name: 'fistPage',
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
        // console.log(444)
        this.$axios.get('/api/getblog').then((res) => {
            // console.log(res.data)
            this.result = res.data.results;
            this.totalNum = res.data.totalNum;
            // this.labels = res.label.split('/');
            console.log(res.data.totalNum)
        })
    },
    getLabel(data) {
        return data.label.split('/')
    },
    openDetail(item) {
        this.$store.commit('changeId', item.id);
        // console.log(this.$store.state.id);
        this.$router.push({
            path:`/article/${item.id}`
        })
    },

    nextPage() {
        this.$axios.get('/api/getNextPage', {
            params: {
                skipNum: this.page * this.perPageNum
            }
        }).then((res) => {
            this.result = res.data;
            this.page++;
        })
    },
    prePage() {
        this.$axios.get('/api/getNextPage', {
            params: {
                skipNum: (this.page - 2) * this.perPageNum
            }
        }).then((res) => {
            this.result = res.data;
            this.page--;
        })
    }
  },
  data() {
      return {
          result:[],
          pic_src:'http://tu.027cgb.com/616983/logo.png',
          page:1,
          totalNum:4,
          perPageNum:3,
      }
  }
  
}
</script>

<style scoped lang="less">
    .fist-page {
        width:60%;
        margin: 0 auto;
        .personShow {
            text-align: center;
            background: transparent;
            padding:3rem;
        }
        .article-wrapper {
            background-color:#fff;
            padding:3rem 2rem;
            margin-bottom:2rem;
        }
        .title {
            font-size: 23px;
            color: #555;
            margin-bottom: 13px;
        }
        .time-detail {
            display: flex;
            span {
                color: #555;
                font-size:10px;
                margin-right:20px;
            }
            .classify {
                color: #7594b3;
            }
        }
        .desc {
            margin: 26px 0;
            line-height: 25px;
            color: #555;
        }
        .label {
            display: flex;
            justify-content: space-between;
            font-size: 10px;
            .left {
                span {
                    margin-right:20px;
                }
            }
            .right {
                span {
                    margin-right:20px;
                }
                .link {
                    cursor:pointer;
                }
            }
        }
        .diverPage {
            margin-top: 2rem;
            padding-bottom: 2rem;
            width: 100%;
           /* display: flex;
            justify-content: space-between;*/
            span {
                display: inline-block;
                width:100px;
                height: 30px;
                line-height:30px;
                text-align:center;
                background: #666;
                color: #fff;
                &:hover {
                    background-color: #2E8B57;
                    cursor: pointer;
                    color: #000;
                }
            }
            .prePage {
                float: left;
            }
            .nextPage {
                float: right;
            }

        }
    }
    .firstPage-enter-active, .firstPage-leave-active {
        transition: all .5s;
    }
    .firstPage-enter, .firstPage-leave-to {
        transform: translate3d(-200%,0,0);
    }


</style>
